<template>
  <el-tabs v-model="activeName">
    <el-tab-pane :label="$t('workOrderMg.tInformation')" name="tenemental">
      <el-form class="r-text" label-width="80px">
        <el-form-item :label="$t('workOrderMg.tCode')">
          {{ tenantData.tenantCode }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.firmName')">
          {{ tenantData.tenantName }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.companies')">
          {{ tenantData.companyName }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.firmAdress')">
          {{ tenantData.tenantAddress }}
        </el-form-item>
      </el-form>
      <el-divider />
      <el-form class="r-text" label-width="80px">
        <el-form-item :label="$t('workOrderMg.Issuer')">
          {{ tenantData.proposer }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.position')">
          {{ tenantData.position }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.explain')">
          <pre>{{ tenantData.remark }}</pre>
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.contact')">
          {{ tenantData.telPhone }}
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane
      v-if="isProcess"
      :label="$t('workOrderMg.record')"
      name="serviceLog"
    >
      <div class="serv-list">
        <div
          v-for="(sItem, index) in serviceData"
          :key="index"
          class="serv-log-item"
        >
          <el-form class="r-text" label-width="80px">
            <el-form-item :label="$t('workOrderMg.serverT')">
              {{ sItem.serviceDate }}
            </el-form-item>
            <el-form-item :label="$t('workOrderMg.workOrderId')">
              {{ sItem.workOrderId }}
            </el-form-item>
            <el-form-item :label="$t('workOrderMg.Issuer')">
              {{ sItem.proposer }}
            </el-form-item>
            <el-form-item :label="$t('workOrderMg.orderType')">
              {{ sItem.typeName }}
            </el-form-item>
            <el-form-item :label="$t('workOrderMg.moduleName')">
              {{ sItem.moduleName }}
            </el-form-item>
            <el-form-item :label="$t('workOrderMg.orderTitle')">
              {{ sItem.orderName }}
            </el-form-item>
          </el-form>
          <div class="log-show-detial">
            <el-button type="text" @click="onShowDetial(sItem.workOrderId)">
              {{ $t('workOrderMg.vDetail') }} >>
            </el-button>
          </div>
        </div>
      </div>

      <ServiceDetail
        :visible.sync="modalKeys.detial"
        :work-order-id="selectId"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { getTenantByOrder, getServiceRecords } from '@/api/workOrder'
import ServiceDetail from './ServiceDetail'

const modalKeys = {
  detial: false
}

export default {
  inject: ['workOrderId', 'isProcess'],
  components: {
    ServiceDetail
  },
  data() {
    return {
      activeName: 'tenemental', // 'serviceLog', //
      modalKeys,
      tenantData: {},
      serviceData: [],
      selectId: ''
    }
  },
  computed: {},
  mounted() {
    this.loadData()
  },
  methods: {
    // getTenantByOrder, getServiceRecords
    async loadData() {
      const { retData: tenantData } = await getTenantByOrder(this.workOrderId)
      this.tenantData = tenantData || {}
      const { retData: serviceData } = await getServiceRecords(this.workOrderId)
      const { records } = serviceData || {}
      this.serviceData = records || []
    },
    onShowDetial(workOrderId) {
      this.modalKeys.detial = true
      this.selectId = workOrderId
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';

.serv-list {
  @include scrollBar;
  overflow-y: scroll;
  height: calc(100vh - 170px - #{$footerHeight});
  .serv-log-item {
    background: $grayBgColor; // 灰色
    padding: 10px;
    margin-bottom: 10px;
    .log-show-detial {
      text-align: center;
    }
  }
}
</style>
